<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash</title>
</head>
<body>

  <div id="root"></div>

  <script>
    let root = document.getElementById('root');
    let lastHistorylength = history.length;
    setTimeout(()=>{
      history.pushState({page:1},"title1",'/page1');
    },1000);

    setTimeout(()=>{
      history.pushState({page:2},"title2",'/page2');
    },2000);

    setTimeout(()=>{
      history.pushState({page:3},"title3",'/page3');
    },3000);

    setTimeout(()=>{
      history.replaceState({page:4},"title4",'/page4');
      console.log(history.length - lastHistorylength);
    },4000);

    setTimeout(()=>{
      history.go(-1);
      console.log(history.length - lastHistorylength);
    },5000);

    setTimeout(()=>{
      history.go(1);
      console.log(history.length - lastHistorylength);
    },6000);
  </script>
</body>
</html>